<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Keywords" content="" />
        <meta name="Description" content="" />
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7 /">
            <title>淘嘟嘟 红包 - {:C('c_title')}</title>
            <link rel="stylesheet" type="text/css" href="__CSS__/home/68ecshop_common.css" />
            <link rel="stylesheet" type="text/css" href="__CSS__/home/ui-quan.css" />
            <link rel="stylesheet" type="text/css" href="__CSS__/home/index.css" />
            <link rel="stylesheet" type="text/css" href="__CSS__/home/index.quan.css" />
            <script src="__JQ__" type="text/javascript" charset="utf-8"></script>
            <script src="__JS__/home/raphael-min.js" type="text/javascript" charset="utf-8"></script>
            <script src="__JS__/taodudu.lib.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <!--公共title-->
        <include file="Public/head_a" />
        <include file="Public/head_b" />
        <include file="Public/head_c" />
        <include file="Public/head_d" />
<!--        <script src="__JS__/home/banner.js" type="text/javascript" charset="utf-8"></script>-->
<!--        <script type="text/javascript">-->
<!--            $(".banner").imgscroll({})-->
<!--        </script>-->
        <div id="g-slider">
            <!--花边-->
        </div>
        <div class="gray-wrap">
            <div class="w">
                <div class="m quan-mod ui-elevator-floor">
                    <div class="mt">
                        <h3><b class="seckill-icon"></b>平台红包</h3>
                    </div>
                    <div class="mc">
                        <div class="ui-switchable-panel-main">

                            <div class="ui-switchable-panel ui-switchable-panel-selected" id="sk-panel-morning" style="display: block;">
                                <div class="seckill-list">
                                    <!--  /widget/quan-seckill/quan-seckill.tpl -->
                                    <foreach name="coupons" item="v" key="k">
                                        <div class="quan-sk-item quan-d-sk-item quan-item-cilck" id="{$v['voucher_id']}" data-key="" data-linkurl="" data-index="2" data-type="dq">
                                            <div class="sk-img">
                                                <img src="{$v['voucher_styleimg']}" alt="" class="err-product">
                                            </div>
                                            <div class="q-type">
                                                <div class="q-price">
                                                    <em>￥</em>
                                                    <strong class="num">{$v['voucher_price']}</strong>
                                                    <div class="txt"><div class="typ-txt">红包</div></div>
                                                </div>
                                                <div class="limit">
                                                    <span class="quota">消费满{$v['voucher_limit']}元可用</span>
                                                </div>
                                                <div class="q-range">
                                                    <div class="range-item">
                                                        <p title="{$v['voucher_title']}">{$v['voucher_title']}</p>
                                                    </div>
                                                    <div class="range-item">
                                                        <p title="time">{:date('Y.m.d',$v['voucher_start_date'])} - {:date('Y.m.d',$v['voucher_end_date'])}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="q-opbtns">
                                                <b class="semi-circle"></b>
                                                <div class="canvas-qcode-box">
                                                    <div class="canvas-box">
                                                        <div class="canvas" id="canvas{$v['voucher_id']}" data-per="{$surplus[$k]}" data-type="dq"></div>
                                                        <a href="javascript:void(0);" class="q-btn get-coupon" clstag="false"><span class="txt">立即领取</span><b></b></a>
                                                        <a href="#none" class="qcode-btn"><b></b></a>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </foreach>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w">
                <div class="m quan-mod ui-elevator-floor" id="quan-find" data-idx="1">
                    <div class="mt">
                        <h3><b class="find-icon"></b>商家购物券</h3>
                        <div class="slogan s2">总有你想要的</div>
                        <div class="line"></div>
                    </div>
                    <div class="mc">
                        <div class="quan-list">
                            <div id="quan-list-one">
                                <!--/ /widget/quan-item/quan-item.tpl -->
                                <foreach name="couponss" item="v">
                                    <div class="quan-item quan-j-item quan-item-acoupon quan-item-cilck" id="{$v['voucher_id']}" data-key="" data-linkurl="{:HOME_URL}/Supplier/{$v['voucher_store_id']}" sku-key="">
                                        <div class="q-type">
                                            <div class="q-price">
                                                <em>￥</em>
                                                <strong class="num">{$v['voucher_price']}</strong>
                                                <div class="txt">
                                                    <div class="typ-txt">红包</div>
                                                    <div class="limit">
                                                        <span class="ftx-06">消费满{$v['voucher_limit']}元可用</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="q-range">
                                                <div class="range-item">
                                                    <p title="{$v['voucher_title']}">{$v['voucher_title']}</p>
                                                </div>
                                                <div class="range-item"> {$v['voucher_storename']}</div>
                                                <div class="range-item">
                                                    {:date('Y.m.d',$v['voucher_start_date'])}-{:date('Y.m.d',$v['voucher_end_date'])}
                                                </div>
                                            </div>
                                        </div>
                                        {$v['voucher_id']|getUserVoucherCount=###,$v['voucher_store_id']}
                                        <if condition="$v['voucher_total'] eq 0">
                                            <div class="q-state">{$v['voucher_total']}
                                                <div class="btn-state btn-getend">已抢完</div>
                                            </div>
                                        </if>
                                    </div>
                                </foreach>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="empty-box02">
                <i class="joy-s-icon"></i>
                <div class="empty-cont">
                    <div class="line"></div>
                    <div class="txt">
                        <a href="/coupons.html" target="_blank" clstag="pageclick|keycount|aladdin_201605165|11">点这里~更多好券等您哟~</a>
                    </div>
                </div>
            </div>
            <div class="ui-dialog-bj" style="display: none;">
                <div class="ui-dialog">
                    <div class="ui-dialog-title"> <span>免费抢券</span> </div>
                    <div class="ui-dialog-content">
                        <div class="tip-box icon-box "><span class="success-icon m-icon"></span>
                            <div class="item-fore">
                                <h3>领取成功！感谢您的参与，祝您购物愉快~</h3>
                                <div class="txt ftx-03">本活动为概率性事件，不能保证所有客户成功领取红包</div>
                                <div class="op-btns mt30">
                                    <a href="" target="_blank" onclick="closeThis('.ui-dialog-close');" class="btn-02 btn-m">立即使用</a>
                                    <a href="javascript:closeThis('.ui-dialog-close');" class="btn-09 btn-m2 ml70">关闭</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="ui-dialog-close" title="关闭"><span class="ui-icon ui-icon-delete"></span></a>
                </div>
            </div>
        </div>
        <!--弹出登录-->
        <include file="Public/alert_login" />
        <!--公共bootom-->
        <div style="clear: both"></div>
        <div class="site-footer">
            <div class="footer-related">
                <include file="Public/bootom_a" />
                <include file="Public/bootom_b" />
                <include file="Public/bootom_c" />
            </div>
        </div>
    </body>
</html>

<script type="text/javascript">
    function show_login_s() {  //判断登录状态 未登录弹出登录框
        <?php if(!empty(session('user_id'))){ ?>
            var p_login = true;
        <?php }else{ ?>
            var p_login = false;
        <?php } ?>
        if (!p_login) {
            $("#pop-mask").show();
            return false;
        } else {
            return true;
        }
    }
    $(".canvas").each(function () {
        var id = $(this).attr("id");
        var per = $(this).attr("data-per");
        var fColor = "#50B1B3"
        var eColor = "#75F0F3"
        circle(id, per, fColor, eColor)
    })

    function circle(id, per, fColor, eColor) { //环形进度条
        var arc = Raphael(id, 60, 60);
        /**
         * [arc]
         * @param  {[Number]} xloc  [x 轴位置]
         * @param  {[Number]} yloc  [y 轴位置]
         * @param  {[Number]} value [百分比]
         * @param  {[Number]} total [百分比基数]
         * @param  {[Number]} R     [半径]
         */
        //A	椭圆弧	(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
        // 横轴长度，纵轴长度 椭圆的横轴与x轴的角度，区分弧度大小（0.小，1大）  绘制弧度方向（0、逆，1、顺），椭圆终点坐标

        arc.customAttributes.arc = function (xloc, yloc, value, total, R) {
            var alpha = 280 / total * value,
                    a = (90 - 35 - alpha) * Math.PI / 180,
                    x = xloc - R * Math.cos(a),
                    y = yloc + R * Math.sin(a),
                    a1 = (90 - 35) * Math.PI / 180,
                    x1 = xloc + R * Math.cos(a1),
                    y1 = yloc + R * Math.sin(a1),
                    x2 = xloc - R * Math.cos(a1),
                    y2 = yloc + R * Math.sin(a1),
                    path;

            if (total == value) {
                path = [
                    ["M", x2, y2],
                    ["A", R, R, 0, 1, 1, x1, y1]
                ];

            } else {
                path = [
                    ["M", x2, y2],
                    ["A", R, R, 0, +(alpha > 180), 1, x, y]
                ];
            }

            return {
                path: path
            };
        };

        var baseArc = arc.path().attr({
            "stroke": fColor,
            "stroke-width": 3,
            //"stroke-dasharray":'.',
            arc: [30, 30, 100, 100, 27]
        });

        // 外层百分比比值圈从0.01开始 fixed bug arc为0时 VML 渲染异常

        var myArc = arc.path().attr({
            "stroke": eColor,
            "stroke-width": 3,
            arc: [30, 30, 0.01, 100, 27]
        });

        var myText = arc.text(30, 20, '剩余').attr({
            'font-family': 'Microsoft YaHei',
            'font-size': '12px',
            'fill': '#fff'
        });
        var textCont = arc.text(30, 35, per + '%');
        textCont.attr({
            'font-family': 'verdana',
            'font-size': '12px',
            'fill': '#fff'
        });

        var target = 100 - per;

        if (target > 0) {
            //将百分比 由0 到 target
            myArc.animate({
                arc: [30, 30, target, 100, 27]
            }, 500, "ease-in-out");
        } else {
            // arc 为 0 隐藏不渲染
            myArc.hide();
        }
    }
    function closeThis(obj) {
        $(obj).parents(".ui-dialog-bj").hide();
    }
    ;
    var linkurl;
    var _this;
    $(".get-coupon").click(function () {  //领券
        if (!show_login_s()) {
            return;
        }
        if ($(this).attr("clstag") == "true") {
            _this = $(this);
            linkurl = $(this).parents(".quan-item-cilck").data("linkurl");
            var cp_id = $(this).parents(".quan-item-cilck").attr("id");
            $.ajax({
                url: "{:U('p_voucher_ajax')}", //返回数据ajax地址
                data: {"cp_id": cp_id},
                dataType: "json",
                type: 'POST',
                success: function (result) {
                    if (result) {
                        $(".btn-02").attr("href", linkurl);
                        $(".ui-dialog-bj").show();
                        _this.text("立即使用");
                    } else {
                        $(".ui-dialog-bj").show();
                        $(".ui-dialog-bj").find(".item-fore").find("h3").html("您已经领取过该购物券了,找找其他购物券吧!");
                    }
                }
            });
        }
    })
    $(".op-btns").find("a").click(function () { //关闭
        _this.attr("href", linkurl);
        _this.attr("clstag", "false");
        _this.parents(".quan-item-cilck").find(".q-state").append("<div class='btn-state btn-geted'>已领取</div>");
    })
</script>